<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Gerenciar Categorias</title>
    </h:head>
    <h:body>
        <h:form id="novaCategoria">
            <p:commandButton value="Nova Categoria" onclick="dlgCategoria.show()"/>
            <p:messages id="mensagensCategoria" showDetail="true" />
            
        </h:form>
        <h:form>
            <p:dataTable value="${categoriaBean.listarCategorias()}" var="categoria" border="1" id="tabelaCategorias" paginator="true" rows="10" emptyMessage="Não há categorias cadastradas no sistema.">
                <p:column filterBy="#{categoria.nome}">
                    <f:facet name="header">
                        NOME CATEGORIA
                    </f:facet>
                    <h:outputText value="#{categoria.nome}"/>
                </p:column>
                <p:column filterBy="#{categoria.tipo}">
                    <f:facet name="header">
                        TIPO DA CATEGORIA
                    </f:facet>
                    <h:outputText value="#{categoria.tipo}"/>
                </p:column>
                <p:column>
                    <f:facet name="header">
                        AÇÕES 
                    </f:facet>
                    <center>
                        <p:commandButton ajax="true" value="Excluir" update="tabelaCategorias" action="#{categoriaBean.removerCategoria(categoria)}" onclick="if(!confirm('Deseja realmente excluir a categoria #{categoria.nome}?')) return false;" >
                        </p:commandButton>
                        | 
                        <p:commandButton value="Atualizar" action="#{categoriaBean.carregarCategoria(categoria)}" />
                    </center>
                </p:column>
            </p:dataTable>
            <p:message for="txtCategoria" display="icon" />
            <p:panel id="panelCategoria">
                <p:dialog widgetVar="dlgCategoria" resizable="false" header="Cadastro de nova Categoria" width="600" >
                    <p:messages id="msgsCategoria" autoUpdate="true"/> 
                    <h:panelGrid columns="2">
                        <h:outputLabel for="txtCategoria" value="Categoria: *" />
                        <p:inputText id="txtCategoria" label="Categoria" value="#{categoriaBean.categoria.nome}" required="true" requiredMessage="Entre com um nome para a categoria">
                            <f:validateLength minimum="2" />
                        </p:inputText>
                        
                        <p:outputLabel value="Tipo: *" />
                        <p:selectOneMenu value="#{categoriaBean.categoria.tipo}" required="true" requiredMessage="Selecione um tipo para a categoria">
                            <f:selectItem itemLabel="Real" itemValue="Real" />
                            <f:selectItem itemLabel="Virtual" itemValue="Virtual" />
                        </p:selectOneMenu>
                        
                        <p:watermark for="txtCategoria" value="Nome da categoria" />
                        <!-- <p:message for="txtCategoria" display="both"  /> -->
                    </h:panelGrid>
                    <p:commandButton id="adicionarCategoriaButton" value="Adicionar Categoria" update="tabelaCategorias" action="#{categoriaBean.adicionarCategoria}"  />
                    <p:commandButton value="Limpar Campos" type="reset" />
                </p:dialog>
            </p:panel>
        </h:form>
    </h:body>
</html>